import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi';
import Hi1 from '@/components/Hi1';
import Hi2 from '@/components/Hi2';
import Left from '@/components/left';
import Right from '@/components/right';
import Params from '@/components/params';
import Error from '@/components/Error';
import Count from '@/components/Count';

Vue.use(Router)

export default new Router({
  mode: 'history', // hash(带#的， 默认值) | history(不带#)
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/cs',
      name: 'cs',
      components: {
        default: Hi,
        left: Right,
        right: Left
      }
    }, {
      path: '/hi',
      name: 'Hi',
      component: Hi,
      children: [{
        path: 'hi1', // 这里的子路由不需要加‘/’，否则找不到子页面
        name: 'Hi/Hi1',
        component: Hi1,
      }, {
        path: 'hi2',
        name: 'Hi/Hi2',
        component: Hi2,
        alias: '/goHi2', // alias在path为‘/’时是不起作用的，这是vue的限制
      }, {
        path: '/params/:paramsId(\\d+)/:paramsTitle', // 这里使用的是正则表达式，就是在参数名后面加上'()',里面是正则表达式
        name: 'params',
        component: Params,
        // beforeEnter: (to, from , next) => {
        //   console.log(11, to);
        //   console.log(22, from);
        //   // next(false);
        //   // next(true);
        //   // next({ path: '/' });
        //   next();
        // }
      }, {
        path: '/goHome',
        name: 'goHome',
        redirect: '/', // 重定向
      }, {
        path: '/goParams/:paramsId(\\d+)/:paramsTitle',
        name: 'goParams',
        redirect: '/params/:paramsId(\\d+)/:paramsTitle',
      }, {
        path: '/count',
        name: 'count',
        component: Count,
      }, {
        path: '/404',
        name: '404',
        component: Error,
      }, {
        path: '*',
        redirect: '/404', // 配置404页面，一定要先在千米啊写好404的路由，然后再最下面通过重定向到‘/404’才可以
      }]
    }
  ]
})
